<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<body>
    <div class="box" title="他是个盒子"></div>
    <input type="checkbox" name="" id="">
    <input type="button" value="">
    <p class="p1">威臣xx大哥大</p>
    <div class="box5">
        <p>李博俊要相信自己，我什么都能背过</p>
    </div>
    <input type="text" name="" id="" value="违纪">
    <div class="box55"></div>
    <script>
        // attr()可以读取属性也可以设置属性
        console.log($('.box').attr('title'));
        $('.box').attr('title', '吉他小王子');
        // removeAttr移除标签对象的属性
        $('.box').removeAttr('title');

        // prop()专门操作属性值为布尔值的属性
        console.log($('input'));
        console.log($('input[type="checkbox"]'));
        console.log($(':checkbox'));
        // console.log($(':button'));
        $(':checkbox').prop('checked', true)

        // 操作class
        // addClass添加类名
        $('div').addClass('box1');
        // romoveClass删除类名
        $('div').removeClass('box');

        // toggleClass切换 有的删除，没的添加   类名切换
        $('div').toggleClass('box3');
        $('div').toggleClass('box1');

        // 注：在写项目操作类名时，选择器不要使用类选择器

        // 操作html标签内部的文本和值
        console.log($('.p1').html());
        console.log($('.p1').text());
        console.log($('.box5').html());
        console.log($('.box5').text());
        // val()可以获取输入框中的值，也可以设置输入框中的值
        console.log($(':text').val());
        $(':text').val('干的漂亮!!')

        /* box55 读取css样式 设置css样式*/
        $('.box55').css({
            width: '100px',
            height: '100px',
            backgroundColor: 'pink'
        })
        $('.box55').css("backgroundColor", "yellow");
        console.log($('.box55').css('backgroundColor'));
    </script>
</body>

</html>